<template>
  <view class="addJiuzhen">
    <view class="card" @click="IdCard">
      <image src="../../static/1.png"></image>
      <text>身份证智能识别</text>
    </view>
    <!-- 表单 -->
    <view class="form">
      <!-- 姓名 -->
      <view class="name">
        <text>姓名</text>
        <input
          type="text"
          v-model="patientFrom.name"
          placeholder="请输入姓名"
        />
      </view>
      <!-- 性别 -->
      <view class="name">
        <text>性别</text>
        <picker class="picker" mode="selector" @change="changeSex" :range="Sex">
          <view class="pick">
            <text>{{
              patientFrom.sex == "" ? "请选择性别" : patientFrom.sex
            }}</text>
          </view>
        </picker>
      </view>
      <!-- 出生日期 -->
      <view class="name">
        <text>出生日期</text>
        <picker class="picker" mode="date" @change="changeDate">
          <view class="pick">
            <text>{{
              patientFrom.born == "" ? "请选择出生日期" : patientFrom.born
            }}</text>
          </view>
        </picker>
      </view>
      <!-- 性别 -->
      <view class="name">
        <text>成员关系</text>
        <picker
          class="picker"
          mode="selector"
          @change="changeGuanxi"
          :range="guanxi"
        >
          <view class="pick">
            <text>{{
              patientFrom.relation == ""
                ? "请选择成员关系"
                : patientFrom.relation
            }}</text>
          </view>
        </picker>
      </view>
      <!-- 身份证 -->
      <view class="name">
        <text>身份证</text>
        <input
          type="number"
          v-model="patientFrom.id_card"
          placeholder="请输入身份证"
        />
      </view>
      <!-- 手机号 -->
      <view class="name">
        <text>手机号</text>
        <input
          type="number"
          v-model="patientFrom.phone"
          placeholder="请输入手机号"
        />
      </view>
    </view>
    <view class="kong"></view>
    <view class="footer">
      <button @click="cancel">取消</button>
      <button @click="subMit">确认添加</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { api } from "../../api/api";
import type { patientFromT } from "../../types/type";
const Sex = reactive(["男", "女"]);
const guanxi = reactive([
  "本人",
  "父母",
  "子女",
  "其他",
  "姐妹",
  "兄弟",
  "母女",
  "母子",
  "父子",
]);
const patientFrom = reactive<patientFromT>({
  name: "",
  sex: "",
  born: "",
  relation: "",
  id_card: "",
  phone: "",
});
const changeSex = (e: any) => {
  patientFrom.sex = Sex[e.detail.value];
};
const changeGuanxi = (e: any) => {
  patientFrom.relation = guanxi[e.detail.value];
};
const changeDate = (e: any) => {
  patientFrom.born = e.detail.value;
};
// 取消返回上一页面
const cancel = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const subMit = async () => {
  const res: any = await api.patient_res(patientFrom);
  if (res.msg == "提交成功") {
    uni.navigateBack();
  } else {
    uni.showToast({
      title: res.msg,
      icon: "none",
    });
  }
};
// 身份证识别
const url = "https://meituan.thexxdd.cn/api" + "/ai_card";
const IdCard = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album"], //从相册选择
    success: function (res) {
      uni.uploadFile({
        url: url,
        filePath: res.tempFilePaths[0],
        name: "file",
        header: { accept: "application/json" },
        success: (uploadFileRes) => {
          const info = JSON.parse(uploadFileRes.data).data;
          patientFrom.sex = info.sex;
          patientFrom.born = info.born;
          patientFrom.id_card = info.id_card;
          patientFrom.name = info.name;
        },
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.addJiuzhen {
  width: 100vw;
  height: 100vh;
  background-color: #f6f6f6;
  .card {
    display: flex;
    align-items: center;
    padding: 40rpx;
    box-sizing: border-box;
    background-color: #fff;
    width: 100%;
    image {
      width: 80rpx;
      height: 80rpx;
      margin-right: 10rpx;
    }
  }
  .form {
    width: 100%;
    // height: 500rpx;
    margin: 20rpx 0;
    background-color: #fff;
    padding: 0 10rpx;
    box-sizing: border-box;
    .name {
      display: flex;
      align-items: center;
      padding: 40rpx 10rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      input {
        flex: 1;
        text-align: right;
      }
    }
    .picker {
      flex: 1;
      text-align: right;
    }
    .name:last-child {
      border: 0;
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 200rpx;
  background-color: #fff;
  justify-content: space-around;
  button:first-child {
    background-color: #e8f2fe;
    color: #2c76ef;
    width: 250rpx;
  }
  button:last-child {
    background-color: #2c76ef;
    color: #fff;
    width: 250rpx;
  }
}
.kong {
  height: 200rpx;
}
</style>
